<template>
  <div class="relative">
    <component
      class="absolute"
      :style="handleStyles(it)"
      v-for="it in states.children"
      :key="it.id"
      :is="it.componentName"
      ref="itRefs"
      :iconName="it.iconName"
      :imgName="it.imgName"
      :componentType="it.componentType"
      :width="it.width + 'px'"
      :height="it.height + 'px'"
      v-model:models="it.props"
      v-model:responseData="it.responseData"
      :themeColor="props.themeColor"
    ></component>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
let props = defineProps({
  models: {
    type: Object,
    default: () => ({}),
  },
  themeColor: {
    type: Array,
    default: () => [],
  },
});
const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

const handleStyles = (it) => {
  // console.log(states.value);
  return {
    top: it.y - states.value.y + "px",
    left: it.x - states.value.x + "px",
  };
};
</script>

<style scoped lang="scss"></style>
